如何在 Webpack 中开启图片压缩

# 工具对比

https://npmtrends.com/image-minimizer-webpack-plugin-vs-image-webpack-loader-vs-imagemin-webpack-vs-imagemin-webpack-plugin (opens new window)

这四个压缩工具，从下载量来看，image-webpack-loader 较多，image-minimizer-webpack-plugin、imagemin-webpack-plugin 次之，imagemin-webpack 已经不再维护，因此不考虑此工具。

https://www.npmjs.com/package/imagemin-webpack (opens new window)

以下是对 image-minimizer-webpack-plugin 、image-webpack-loader 和 imagemin-webpack-plugin 的使用进行简要介绍。

# 使用与配置

先给出没有加压缩工具的 webpack 配置

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: {
    index: "./index.js",
  },
  output: {
    path: path.resolve(__dirname, "build1"),
    filename: "[name].js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /.(css)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
      {
        test: /.(jpe?g|png|gif|ico|svg)$/,
        exclude: /node_modules/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      ignoreOrder: false,
    }),
  ],
  mode: "production",
  optimization: {
    runtimeChunk: {
      name: "runtime~single",
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# image-minimizer-webpack-plugin

安装：cnpm i image-minimizer-webpack-plugin imagemin -D

无损压缩：cnpm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

配置如下：

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

打包后，图片大小压缩至 7.41 MB。

有损压缩：cnpm install @squoosh/lib --save-dev

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.squooshMinify,
        },
      }),
    ],
    runtimeChunk: {
      name: "runtime~single",
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

打包后，图片大小压缩至 1.48 MB。

# image-webpack-loader

安装：cnpm install image-webpack-loader -D

配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /.(jpe?g|png|gif|ico|svg)$/,
        exclude: /node_modules/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
        use: [
          {
            loader: "image-webpack-loader",
            // options: {
            //   disable: process.env.NODE_ENV === 'development'
            // },
          },
        ],
      },
    ],
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

打包后，图片大小压缩至 1.69 MB。

# imagemin-webpack-plugin

安装：cnpm install imagemin-webpack-plugin

配置如下：

const ImageminPlugin = require("imagemin-webpack-plugin").default;

module.exports = {
  optimization: {
    minimizer: [
      new ImageminPlugin({
        // disable: process.env.NODE_ENV === 'development',
      }),
    ],
    runtimeChunk: {
      name: "runtime~single",
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14

打包后，图片大小压缩至 7.64 MB。

# 压缩前后对比

这三个工具的共同点：压缩图片都依赖于 imagemin (opens new window)，所以对使用这几个工具压缩图片前后体积对比，个人感觉意义不大；如果对同一图片压缩后体积大小不一致，甚至差别很大，很可能是因为压缩相关的配置不太一致。

不过我们可以就以上的配置（基本是官方给的示例配置），去做一些比较。

工具	使用感受	压缩前	压缩后
image-minimizer-webpack-plugin	配置较复杂	8.26 MB	无损：7.41 MB 有损：1.48 MB
image-webpack-loader	配置简单	8.26 MB	有损：1.69 MB
imagemin-webpack-plugin	配置简单	8.26 MB	无损：7.64 MB

# 使用建议

最后从工具的流行程度、使用感受、压缩力度等方面综合考虑，推荐使用 image-webpack-loader 来压缩图片。

注意：在安装包的时候可能会报错，npm install image-webpack-loader -D，主要是在下载一系列压缩工具的时候出错。这时可以切换为国内镜像，用 cnpm install image-webpack-loader -D，这样可以成功安装。

# 参考

← Webpack 实践 - optimization.splitChunks